<template>
  <div class="add_5">
    <div class="form_box">
      <Form ref="formValidate" :model="formValidate" :rules="rules" :label-width="100">
        <Form-item label="虚拟销量">
          <Input-number v-model="formValidate.virtualSales" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="排序">
          <Input-number v-model="formValidate.sort" :min="0" ></Input-number>
        </Form-item>
        <hr style="margin-bottom: 20px">
        <Form-item label="赠送积分">
          <Input-number v-model="formValidate.integral" :min="0" ></Input-number>
        </Form-item>
        <Form-item label="赠送优惠券">
          <div class="couponListBox" v-if="couponList && couponList.length>0">
            <div class="couponBox" v-for="item in couponList" :key="item.id">
              <span>{{item.coupon_title}}</span>
              <span class="iconfont icon-close-bold" @click="delCoupon(item)"></span>
            </div>
          </div>
          <Button type="primary" @click="addCoupon">添加优惠券</Button>
        </Form-item>
        <hr style="margin-bottom: 20px">
        <Form-item label="付费会员专属">
          <i-switch size="large" v-model="formValidate.vipExclusive">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
          <p class="tip">
            开启后仅付费会员可以看见并购买此商品
          </p>
        </Form-item>
        <Form-item label="单独设置">
          <Checkbox-group v-model="formValidate.vipSetting">
            <Checkbox v-for="item in vipSettingList" :key="item.value" :label="item.label"></Checkbox>
          </Checkbox-group>
        </Form-item>
        <Form-item label="商品属性" v-if="formValidate.vipSetting.length>0">
          <el-table
            ref="multipleTable"
            :data="productionProperty"
            tooltip-effect="dark"
            border>
            <el-table-column
              label="图片">
              <template slot-scope="scope">
                <img src="../../../assets/imgs/noImg.png" alt="" v-if="!scope.row.pic">
                <img :src="scope.row.pic" alt="" v-if="scope.row.pic">
              </template>
            </el-table-column>
            <el-table-column
              prop="sellingPrice"
              label="售价">
            </el-table-column>
            <el-table-column
              prop="costPrice"
              label="成本价">
            </el-table-column>
            <el-table-column
              prop="originalPrice"
              label="原价">
            </el-table-column>
            <el-table-column
              label="一级返佣"
              width="120"
              v-if="formValidate.vipSetting.indexOf('佣金设置(数字即返佣金额)')>=0">
              <template slot-scope="scope">
                <Input v-model="scope.row.firstGrade" ></Input>
              </template>
            </el-table-column>
            <el-table-column
              label="二级返佣"
              width="120"
              v-if="formValidate.vipSetting.indexOf('佣金设置(数字即返佣金额)')>=0">
              <template slot-scope="scope">
                <Input v-model="scope.row.secondGrade" ></Input>
              </template>
            </el-table-column>
            <el-table-column
              label="会员价"
              width="120"
              v-if="formValidate.vipSetting.indexOf('付费会员价')>=0">
              <template slot-scope="scope">
                <Input v-model="scope.row.vipPrice" ></Input>
              </template>
            </el-table-column>
          </el-table>
        </Form-item>
        <hr style="margin-bottom: 20px">
        <Form-item label="预售商品" >
          <i-switch size="large" v-model="formValidate.isPresell">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </Form-item>
        <Form-item label="预售活动时间" v-if="formValidate.isPresell" prop="presellTime">
          <Date-picker type="daterange" confirm placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
          <p class="tip">
            开启后仅付费会员可以看见并购买此商品
          </p>
        </Form-item>
        <Form-item label="发货时间" v-if="formValidate.isPresell">
          <div class="deliveryTime">
            预售活动后
            <Input-number v-model="formValidate.deliveryTime" :min="1" ></Input-number>
            天内
          </div>
        </Form-item>
        <Form-item label="商品推荐">
          <Checkbox-group v-model="formValidate.productionRec">
            <Checkbox v-for="item in productionRec" :key="item.value" :label="item.label"></Checkbox>
          </Checkbox-group>
        </Form-item>
        <Form-item label="活动优先级">
          <draggable v-model="activityPriority" group="people" animation="1000" @start="dragStart" @Update="dragEnd" @end="dragEnd">
            <transition-group>
              <div class="dragItem" :style="{backgroundColor: item.color}" v-for="item in activityPriority" :key="item.id">{{item.name}}</div>
            </transition-group>
          </draggable>
          <p class="tip">
            可拖动按钮调整活动的优先展示顺序
          </p>
        </Form-item>
      </Form>
    </div>
    <aside>
      <Modal
        v-model="couponModel"
        title="优惠券列表"
        @on-ok="ok"
        @on-cancel="cancel"
        width="900">
        <div>
          <el-table
            ref="couponTable"
            :data="totalCoupons"
            :header-cell-style="getRowClass"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="36">
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              width="60">
            </el-table-column>
            <el-table-column
              prop="coupon_title"
              label="优惠券名称"
              width="180">
            </el-table-column>
            <el-table-column
              label="优惠券类型"
              width="100">
              <template slot-scope="scope">
                <span v-for="item in typeList" :key="item.type" v-if="scope.row.type===item.type">{{item.title}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="coupon_price"
              label="面值"
              width="80">
            </el-table-column>
            <el-table-column
              prop="use_min_price"
              label="最低消费额"
              width="100">
            </el-table-column>
            <el-table-column
              label="发布数量"
              width="90">
              <template slot-scope="scope">
                <span v-for="item in totalCount" :key="item.value" v-if="scope.row.total_count===item.value">{{item.title}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="有效期限"
              width="120">
              <template slot-scope="scope">
                <span v-for="item in end_time" :key="item.value" v-if="scope.row.end_time===item.value">{{item.title}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="80">
              <template slot-scope="scope">
                <el-tag
                  v-for="item in status"
                  :key="item.value"
                  :type="item.type"
                  v-if="scope.row.status===item.value"
                  effect="dark"
                  size="small">
                  {{ item.title }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import totalCoupons from '../../../apiData/totalCoupons.js'
  export default {
    name: "add_5",
    data() {
      return {
        formValidate: {
          virtualSales: 0,  // 虚拟销量
          sort: 0,  // 虚拟销量
          integral: 0,  // 积分
          vipExclusive: false,  // 会员专属
          isPresell: false,  // 预售商品？
          vipSetting: [],
          deliveryTime: 1,  // 发货时间
          productionRec: [],  // 商品推荐
        },
        rules: {
          presellTime: [
            { required: true, message: '预售时间不能为空', trigger: 'blur' }
          ]
        },
        couponList: [],  // 已添加的优惠券
        couponModel: false,  // add优惠券弹窗
        totalCoupons: [],
        typeList: [
          { type: 0, title: '通用券' },
          { type: 1, title: '品类券' },
          { type: 2, title: '商品券' }
        ],
        totalCount: [
          { value: 0, title: '不限量' },
          { value: 1, title: '1000份' },
          { value: 2, title: '500份' },
          { value: 3, title: '100份' }
        ],
        end_time: [
          { value: 0, title: '不限时' },
          { value: 1, title: '60天后到期' },
          { value: 2, title: '30天后到期' },
          { value: 3, title: '7天后到期' },
        ],
        status: [
          { value: 0, title: '未启用', type: 'info' },
          { value: 1, title: '正常', type: '' },
          { value: 2, title: '过期', type: 'warning' }
        ],
        vipSettingList: [
          { value: 0, label: '佣金设置(数字即返佣金额)' },
          { value: 1, label: '付费会员价' },
        ],
        productionRec: [
          { value: 0, label: '热卖单品' },
          { value: 1, label: '促销单品' },
          { value: 2, label: '精品推荐' },
          { value: 3, label: '首发新品' },
          { value: 4, label: '优品推荐' }
        ],
        productionProperty: [
          {
            pic: '',
            sellingPrice: '0',
            costPrice: '0',
            originalPrice: '0',
            firstGrade: 0,
            secondGrade: 0,
            vipPrice: 0
          }
        ],
        activityPriority: [
          { people: 'cn', id: 1, name: '默认', color: '#ed4014' },
          { people: 'cn', id: 2, name: '秒杀', color: '#1e9fff' },
          { people: 'cn', id: 3, name: '砍价', color: '#009688' },
          { people: 'cn', id: 4, name: '拼团', color: '#feb900' }
        ],
        selectedCoupon: [],  // 已选中的优惠券
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.totalCoupons = totalCoupons
      },
      // 添加优惠券
      addCoupon() {
        // this.$refs.couponTable.clearSelection();
        this.selectedCoupon = [];
        this.couponModel = true
      },
      ok() {
        if(this.couponList && this.couponList.length) {
          if(this.selectedCoupon && this.selectedCoupon.length) {
            this.selectedCoupon.forEach(item => {
              let index = this.couponList.indexOf(item);
              if(index === -1) {
                this.couponList.push(item)
              }
            })
          }
        }else{
          if(this.selectedCoupon && this.selectedCoupon.length) {
            this.selectedCoupon.forEach(item => {
              this.couponList.push(item)
            })
          }
        }
        //selectedCoupon
      },
      cancel() {
        console.log('cancel');
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      handleSelectionChange(val) {
        this.selectedCoupon = val;
      },
      // 删除选中的优惠券
      delCoupon(item) {
        this.$refs.couponTable.toggleRowSelection(item);
        this.couponList.splice(this.couponList.indexOf(item), 1)
      },
      dragStart() {
        //
      },
      dragEnd() {
        console.log(this.activityPriority);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .add_5 {
    hr{
      border: 1px dotted rgba(102,102,102,0.2);
    }
    .form_box{
      .couponListBox{
        display: flex;
        margin-bottom: 10px;
        .couponBox{
          border: 1px solid #f0f0f0;
          height: 30px;
          padding: 0 8px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          margin-right: 8px;
          span.iconfont{
            margin-left: 4px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
          }
          span.iconfont:hover{
            color: #000;
          }
        }
      }
      img{
        width: 60px;
        height: 60px;
      }
      .dragItem{
        display: inline-block;
        height: 26px;
        line-height: 26px;
        color: #fff;
        padding: 0 10px;
        border-radius: 3px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .ivu-input-number,
  .ivu-select{
    width: 300px;
  }
  .deliveryTime{
    .ivu-input-number{
      width: 70px;
    }
  }
  /deep/ .el-table{
    th,td{
      text-align: center;
    }
  }
  /deep/ .ivu-select-dropdown{
    left: 0 !important;
  }
  /deep/ .ivu-input-number,
    /*/deep/ .ivu-input-number-input-wrap,*/
  /deep/ .ivu-input,
    /*/deep/ .ivu-input-inner-container*/
  /deep/ .ivu-input-number-input{
    background: transparent;
    border: 1px solid rgba(102,102,102,0.2);
  }
  /deep/ .ivu-input-inner-container,
  /deep/ .ivu-input-number-input{
    border: none;
  }
  /deep/ .ivu-modal{
    .ivu-modal-content{
      background: #333;
      .ivu-modal-header{
        border-bottom: 1px solid rgba(102,102,102,0.2);
      }
      .ivu-modal-footer{
        border-top: 1px solid rgba(102,102,102,0.2);
      }
    }
  }
</style>
